// 服务端入口

import createApp from "./app.js";

// 服务端渲染可以返回一个函数
export default (context) => {
  let { url } = context;
  // 此方法是在服务端调用
  // 路由是异步组件，所以这里我们需要等到路由加载完毕
  return new Promise((resolve, reject) => {
    let { app, router, store } = createApp();
    router.push(url);

    router.onReady(() => {
      // 等待路由跳转完毕， 组件已经准备好了
      const matchComponents = router.getMatchedComponents();
      // matchComponents 指的是路由匹配到的所有组件（页面级别的组件）

      if (matchComponents.length == 0) {
        // 没有匹配到前端路由
        return reject({ code: 404 });
      } else {
        Promise.all(
          matchComponents.map((component) => {
            if (component.asyncData) {
              // 服务器在渲染的时候， 默认胡找到页面级别的组件中的asyncData方法， 并且在服务器端也会创建一个vuex，传递给asyncData
              return component.asyncData(store);
            }
          })
        ).then(() => {
          // 默认在window下生成一个变量
          // window.__INITIAL_STATE__={"name":"seven"}
          context.state = store.state; // 服务器执行完毕后， 最新的状态会保存在store.state
          resolve(app);
        });
      }
    });
  });
  // router.push(url);

  // router.onReady(()=> {
  // 	// 等待路由跳转完毕， 组件已经准备好了
  // 	const matchComponents = router.getMatchedComponents();
  // 	if(matchComponents.length == 0){
  // 		// 没有匹配到前端路由
  // 		return;
  // 	}else {

  // 	}
  // })

  // let { app, router } = createApp();
  // router.push("/");// 表示永远跳转/路径
  // app 对应的就是new Vue，并没有被路由所管理， 我希望等到路由跳转完毕后， 再进行服务端渲染

  // 当用户访问到一个不存在的页面， 如何匹配到前端的路由

  // return app; // 每次都能产生一个新的应用
};

// 当用户访问bar时， 我在服务端直接进行了服务端渲染， 渲染后的结果返回给了浏览器， 浏览器加载js脚本，根据路径加载js脚本，重新渲染了bar
